import React from 'react'
import { NavBar, Space, Toast } from "antd-mobile";
import { useMatch, useNavigate } from 'react-router-dom';
import style from '../../path/home/index.module.css'
import { Button, SearchBar } from "antd-mobile";
import Bjm from '../../assets//ccc.png'
import { Swiper } from "antd-mobile";
import { lunbiApi } from '../../api/index'
import { useLoaderData } from 'react-router-dom';
import { upzhui } from '../../path/store/slice/ticketslice'
// import { useSelector } from "react-router-dom";
function Index() {
  const nav = useNavigate()
  const loader=useLoaderData()
  const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];
  // const statr = useSelector((store) => store.ticket.statr);
  // const end = useSelector((store) => store.ticket.end);
  // const date = useSelector((store) => store.ticket.date);
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        className={style.content}
        style={{ background: color }}
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`);
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ));
  return (
    <div>
      <div className={style.op} onClick={() => nav("/chengshi?type=statr")}>
        <NavBar onBack={() => nav(-1)}>
          <SearchBar placeholder="当前城市位置：北京" className={style.pp} />
        </NavBar>
      </div>
      <div className={style.zhong}>
        <span className={style.z1}>旅游</span>
        <span className={style.z2}>跟团游</span>
        <span className={style.z3}>自由行</span>
        <span className={style.z4}>定制包团</span>
        <span className={style.z5}>自驾游</span>

        <span className={style.z6}>票物</span>
        <span className={style.z7}>景区门票</span>
        <span className={style.z8}>机票</span>
        <span className={style.z9}>火车票</span>
        <span className={style.z10}>汽车.船票</span>

        <span className={style.s6}>住宿</span>
        <span className={style.s7}>酒店</span>
        <span className={style.s8}>海外住宿</span>
        <span className={style.s9}>民宿.公寓</span>
        <span className={style.s10}>钟点房</span>
      </div>
      <div className={style.jia}>
        <span>签证</span>
        <span>租车</span>
        <span>团建/年会</span>
        <span>演出赛事</span>
        <span>摄影旅游拍</span>
      </div>
      <div>
        <Swiper autoplay>{items}</Swiper>
      </div>
      <div>
        <img src={Bjm} alt="" className={style.lo} />
      </div>
    </div>
  );
}

export default Index
export const loader = async() => {
    
  return {}
}
